<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./style.css">
    <title>个性化音乐播放器</title>
</head>
<body>
    <article class="photo">
        <div class="title">Loving Strangers</div>
        <div class="singer">Russian Red</div>
        <div class="play"></div>
        <div class="lrc">
            <div class="content"></div>
        </div>
    </article>
    <audio src="./content/musics/LovingStrangers.mp3" id="music"></audio>
    <textarea id="musicworld" cols="30" rows="10" style="display: none;">
        [00:00.00]Loving Strangers
        [00:06.34]词:Jocelyn Frances Pook
        [00:12.69]曲:Jocelyn Frances Pook
        [00:19.03]Loving strangers  loving strangers
        [00:23.83]Loving strangers  oh 
        [00:27.88]Loving strangers  loving strangers
        [00:33.13]Loving strangers  oh 
        [00:37.68]I've got a hole in my pocket
        [00:47.14]Where all the money has gone
        [00:54.82]I've got a whole lot of work
        [01:03.12]To do with your heart
        [01:05.92]Cause it's so busy  mine's not
        [01:15.46]Loving strangers  loving strangers
        [01:20.08]Loving strangers  oh 
        [01:24.81]Loving strangers  loving strangers 
        [01:29.62]Loving strangers  oh 
        [01:34.30]It's just the start of the winter
        [01:40.79]And I'm all alone
        [01:43.41]But I've got my eye right on you
        [01:53.21]Give me a coin and I'll take you to the moon
        [02:02.20]Give me a beer and I'll kiss you so foolishly 
        [02:11.12]Like you do when you lie  when you're not in my thoughts 
        [02:20.35]Like you do when you lie and I know it's not my imagination
        [02:33.33]Loving strangers  loving strangers
        [02:38.32]Loving strangers  oh 
        [02:43.16]Loving strangers  loving strangers 
        [02:48.27]Loving strangers  oh 
        [03:11.94]Loving strangers  loving strangers 
        [03:16.43]Loving strangers  oh 
        [03:21.53]Loving strangers  loving strangers 
        [03:26.08]Loving strangers  oh
    </textarea>
</body>
<script>
    let mark = true
    let music = document.getElementById("music")
    let musicworld = document.getElementById("musicworld").value/*get歌词*/
    let show_mw = document.querySelector(".content")/*歌词显示的区域*/
    let btn = document.querySelector(".play").addEventListener("click", function(){
        if(mark){
            this.className += " playing"/*click通过改变btn的className来增加动画的选择器*/
            music.play()
            mark=false
        }else{
            music.pause()
            mark=true
            this.className = "play"
        }
    })

    /*显示歌词到指定区域*/
    let musicworldarr = musicworld.split("[")
    let html = ""
    for(let i = 1;i<musicworldarr.length;i++){
        let arr = musicworldarr[i].split("]")/*通过和之前split的"["取到歌词中时间戳(arr[0])和歌词(arr[1])*/
        let time = arr[0].split('.')[0]/*取分钟与秒组成的数组*/
        let minute = time.split(':')[0]/*分钟*/
        let second = time.split(':')[1]/*秒*/
        let musictime = minute*60+second*1/*歌曲对应时间*/
        if(arr[1])/*判断是否还有歌词*/{
            html += "<p id=" + musictime + ">" + arr[1] + "</p>"
        }
    }
    show_mw.innerHTML = html
    
    /*判断当前歌词*/
    let num = 0
    let ops = show_mw.getElementsByTagName("p")/*查找show_mw下标签为p的元素*/
    music.addEventListener("timeupdate", function(){
        let current_Time = parseInt(this.currentTime)/*获取音频当前时间并转化为int*/
        if(document.getElementById(current_Time)){/*与之前增加的p标签中的id对应*/
            for(let i = 0;i<ops.length;i++){
                ops[i].style.cssText = ""/*不在当前歌词为空样式*/
            }
            document.getElementById(current_Time).style.cssText = "color: palevioletred; font-size: 20px;"/*当前歌词的样式*/ 
            
            /*设置当前播放歌词位居中间*/
            if(ops[5 + num].id == current_Time){
                show_mw.style.top = -22 * num + "px"
                num++
            }
        }
    })
</script>
</html>